<html>
    <head>
        <meta charset="utf-8">
        <script src="../dist/claygl.js"></script>
    </head>
    <body style="margin:0px;">
        <canvas id="main"></canvas>
        <script type="text/javascript">
            var Shader = clay.Shader;

            var renderer = new clay.Renderer({
                canvas: document.getElementById('main')
            });
            var scene = new clay.Scene;
            var camera = new clay.camera.Perspective({
                aspect: renderer.getViewportAspect(),
                far: 30
            });
            renderer.resize(window.innerWidth, window.innerHeight);

            camera.position.set(0, 1, 2);

            var plane = new clay.plugin.InfinitePlane({
                camera: camera,
                material: new clay.Material({
                    shader: clay.shader.library.get('clay.lambert'),
                    transparent: true
                }),
                culling: false
            });
            plane.plane.distance = -1;
            scene.add(plane);
            var cube = new clay.Mesh({
                material: new clay.Material({
                    shader: clay.shader.library.get('clay.basic')
                }),
                geometry: new clay.geometry.Cube()
            });
            cube.material.set('diffuseMap', clay.util.texture.createChessboard());
            scene.add(cube);

            var light = new clay.light.Directional()
            light.position.set(1, 1, 1);
            light.lookAt(scene.position);
            scene.add(light);

            var control = new clay.plugin.OrbitControl({
                target: camera,
                domElement: renderer.canvas,
                sensitivity: 0.4
            });

            var timeline =  new clay.Timeline();
            timeline.start();

            timeline.on('frame', function(deltaTime) {
                control.update(deltaTime);
                camera.update(true);
                plane.updateGeometry();
                plane.geometry.generateBarycentric();
                renderer.render(scene, camera);
            });

        </script>
    </body>
</html>